<template>
  <el-card class="filter-container">
    <transition name="skeleton-fade" mode="out-in">
      <skeleton-card v-if="loading" :rows="4" key="skeleton" />
      <el-form v-else :inline="true" :model="filterData" size="small" key="form" class="responsive-form">
        <el-form-item label="开始日期" class="form-item">
          <el-date-picker
            v-model="filterData.startDate"
            type="date"
            placeholder="选择开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" class="form-item">
          <el-date-picker
            v-model="filterData.endDate"
            type="date"
            placeholder="选择结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="数据来源" class="form-item">
          <el-select v-model="filterData.source" placeholder="请选择数据来源" clearable style="width: 100%">
            <el-option label="上海铝价" value="shanghai"></el-option>
            <el-option label="长江铝价" value="changjiang"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手动更新" class="form-item">
          <el-select v-model="filterData.manualUpdate" placeholder="请选择" clearable style="width: 100%">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-btn-group">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
  </el-card>
</template>

<script>
import SkeletonCard from '@/components/SkeletonCard.vue'

export default {
  name: 'AluminumFilterForm',
  components: {
    SkeletonCard
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    queryParams: {
      type: Object,
      default: () => ({
        startDate: '',
        endDate: '',
        source: '',
        manualUpdate: null
      })
    }
  },
  data() {
    return {
      filterData: {
        startDate: this.queryParams.startDate || '',
        endDate: this.queryParams.endDate || '',
        source: this.queryParams.source || '',
        manualUpdate: this.queryParams.manualUpdate
      }
    }
  },
  watch: {
    queryParams: {
      handler(newVal) {
        this.filterData = {
          startDate: newVal.startDate || '',
          endDate: newVal.endDate || '',
          source: newVal.source || '',
          manualUpdate: newVal.manualUpdate
        };
      },
      deep: true
    }
  },
  methods: {
    handleSearch() {
      this.$emit('query', { ...this.filterData });
    },
    handleReset() {
      this.filterData = {
        startDate: '',
        endDate: '',
        source: '',
        manualUpdate: null
      };
      this.$emit('reset');
    }
  }
}
</script> 